<template>
    <div>
        <div class="wrap">
            <bread-crumb></bread-crumb>
            <h1>带头像的所有学生信息</h1>
            <div>
                <el-table :data="tableData" style="width: 100%" border height="500px" @row-click="goDetail">
                <el-table-column prop="stu_id" label="学号" width="100">
                </el-table-column>
                <el-table-column prop="stu_name" label="姓名" width="100">
                </el-table-column>
                <el-table-column prop="stu_sex" label="性别" width="100">
                </el-table-column>
                <el-table-column prop="stu_date" label="出生日期" width="100">
                    <template slot-scope="scope">
                        <p>{{scope.$index}}</p>
                        <p>{{$moment(scope.row.stu_date).format('YYYY-MM-DD')}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="stu_head_img" label="头像">
                    <template slot-scope="scope">
                        <el-image 
                            style="width: 100px; height: 100px"
                            :src="scope.row.stu_head_img" 
                            :preview-src-list="srcList"
                            @click="bigImage(scope.row.stu_head_img)"
                            >
                        </el-image>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background 
            layout="prev, pager, next" 
            :total="total" 
            :page-size="pageSize" 
            :current-page="currentPage"
            @current-change="currentChange"
            >
            </el-pagination>
            <el-button @click="$router.push({name:'AllStuInfoHeaderHou'})">测试后台分页的写法</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import {req_all_stu_info} from '@/api/stuinfo.js';
    export default {
        async mounted(){
            let result=await req_all_stu_info();
            // 分页
            // 分页  真分页  服务器一组组返回数据
            // 分页 假分页  服务器当中所有的学生信息请求回来 在前台进行分页这种称谓假分页

            // 当数据量大的时候都是真分页  100
            // 一页可能只展示50条
            console.log(result);
            // 当请求回来数据之后将数据赋值给tableData
            this.tableData=result.data;
            // 请求回来的数组长度为分页当中的总条数
            this.total=result.data.length;
            this.totalData=result.data;
            // 注意问题 当前table当中渲染的数据还73    tableData  result.data
            //如果想让table当中显示5条数据  让tableData为5条数据即可
            //默认上来 第一页 （当前页码-1）* 每一页有多少条（5），当前页码* 每一页有多少条
            this.tableData=this.totalData.slice(
                (this.currentPage - 1) * this.pageSize,
                this.currentPage * this.pageSize);

            console.log(this.$moment('2022-07-05T07:18:03.312Z').format('YY-MM-DD'));
        },
        data() {
            return {
                tableData:[],
                srcList:[
                    'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                ],
                total:0, //数据的总条数
                pageSize:3, //3条数据一页
                totalData:0,  //请求回来的全部数据
                currentPage:1  //当前页码
            }
      },
      methods:{
        currentChange(value){
            this.tableData = this.totalData.slice(
                (value - 1) * this.pageSize,
                value * this.pageSize
            );
        },
        bigImage(value){
            console.log(value);
            this.srcList[2]=value;
        },
        goDetail(row,column,event){
            console.log(row,column,event);
            // 进行路由跳转是随便跳转的吗？不是，除了点击头像，其它都可以
            console.log(event.target.tagName);
            if(event.target.tagName != 'IMG'){
                this.$router.push({
                name:'StuDetail',
                query:{
                    StuInfoDetail:JSON.stringify(row),
                }
                })
            }
        }
      }
    }
</script>

<style lang="scss" scoped>
    .wrap{
        height:30px;
        
    }
</style>